<!--
 * @Author: 姚沈阳 11500793+yao-shenyang@user.noreply.gitee.com
 * @Date: 2023-10-30 10:44:23
 * @LastEditors: 姚沈阳 11500793+yao-shenyang@user.noreply.gitee.com
 * @LastEditTime: 2023-10-30 16:23:30
 * @FilePath: \实训二PC\vue-project\src\components\RightLine.vue
 * @Description: 
 * qq1908552310
-->
<template>
    <div class="lineChartcontianer">
        <div class="selectedCity">
            <a-space>
                <a-select v-model:value="value" style="width: 85px" @change="handleChange">
                    <a-select-option value="今天">今天</a-select-option>
                    <a-select-option value="近一周">近一周</a-select-option>
                    <a-select-option value="近一月">近一月</a-select-option>
                </a-select>
            </a-space>
        </div>
        <div ref="LinechartRef" class="chart"></div>
        <div class="switchingCity">
            <div :class="{ 'active': City.isDepartureActive }" @click="SetOutCity">出发城市</div>
            <div :class="{ 'active': City.isArrivalActive }" @click="ReachCity">到达城市</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue"
import * as echarts from 'echarts';
const value: any = ref(['今天'])
const LineColors: any = ref('#679CF6')
const LinechartRef = ref<HTMLElement | null>(null);

// 控制选择城市的高亮
const City = reactive({
    isDepartureActive: true,
    isArrivalActive: false,
    data: ["30", "26", "24", "22", "19", "16", "14", "13", "10", "6"]

})
const SetOutCity = () => {
    City.isDepartureActive = true
    City.isArrivalActive = false
    if (City.isDepartureActive == true) {
        LineColors.value = '#679CF6'
        City.data = ["30", "26", "24", "22", "19", "16", "14", "13", "10", "6"]
        LineChart()
    }
}
const ReachCity = () => {
    City.isDepartureActive = false
    City.isArrivalActive = true
    if (City.isArrivalActive == true) {
        LineColors.value = '#A4C4FA'
        City.data = ["19", "10", "30", "13", "24", "14", "6", "26", "22", "16"]
        LineChart()
    }
}
const handleChange = (value: string) => {
    switch (value) {
        case '今天':
            LineColors.value = '#679CF6'
            if (City.isArrivalActive == true) {
                LineColors.value = '#A4C4FA'
                City.data = ["19", "10", "30", "13", "24", "14", "6", "26", "22", "16"]
            } else if (City.isDepartureActive == true) {
                LineColors.value = '#679CF6'
                City.data = ["30", "26", "24", "22", "19", "16", "14", "13", "10", "6"]
            }
            break;
        case '近一周':
            LineColors.value = '#FF8D41'
            City.data = ["19", "22", "13", "30", "10", "16", "6", "24", "26", "14"]
            break;
        case '近一月':
            LineColors.value = '#DE799B'
            City.data = ["16", "13", "22", "19", "30", "24", "14", "6", "10", "26"]
            break;
        default:

            break;
    }
    LineChart()
};

const LineChart = () => {
    if (LinechartRef.value) {
        var myChart = echarts.init(LinechartRef.value);
        // 图表配置项
        var option = {
            title: {
                text: '热门出发/到达城市排名',
                left: '3%',
                textStyle: {
                    color: "#1BA9BA",
                    marignLeft: "10px"
                }
            },
            grid: {
                top: 80, // 设置上边距为0
                bottom: 40, // 设置下边距为0
                left: 50
            },
            xAxis: {
                type: 'value', //设置x为数值轴
                show: false // 隐藏横轴线和刻度
            },
            yAxis: {
                type: 'category', //y轴为主轴
                inverse: true, // 设置横轴标题反向显示
                data: ['三亚', '深圳', '北京', '上海', '武汉', '香港', '澳门', '成都', '桂林', '哈尔滨'],
                boundaryGap: false,  // 取消坐标轴两端的空白间隙
                axisLabel: {
                    interval: 0,
                    fontSize: 10,
                    show: true, // 显示纵轴标签
                    color: '#333' // 设置标签颜色
                },
                axisLine: {
                    show: true, // 显示纵轴线，
                    onZero: true, // 将纵轴线显示在最左边
                    lineStyle: {
                        width: 1,
                        color: '#333' // 设置轴线颜色
                    }
                },
                axisTick: {
                    show: false // 隐藏纵轴刻度
                },

            },
            series: [{
                barWidth: '50%', // 调整柱子宽度为较小的值
                type: 'bar',
                barCategoryGap: '20%', // 调整相邻柱子之间的间隙
                animationDuration: 1000, // 设置动画时间为1秒
                itemStyle: {
                    color: LineColors.value
                },
                data: City.data
            }]
        };

        // 设置图表配置项并渲染图表
        option && myChart.setOption(option);
    }
}

onMounted(() => {
    LineChart()
});
</script>

<style scoped lang="scss">
.lineChartcontianer {
    width: 100%;
    height: 100%;
    position: relative;

    .selectedCity {
        position: absolute;
        top: 20px;
        right: 20px;
        z-index: 999;
    }

    .switchingCity {
        width: 130px;
        height: 30px;
        position: absolute;
        top: 30px;
        left: 20px;
        z-index: 999;
        display: flex;

        div {
            width: 75px;
            height: 100%;
            background: #e3e4e6;
            color: #80879B;
            text-align: center;
            line-height: 30px;
            border-radius: 4px;
            cursor: pointer;
        }

        .active {
            background: #1BA9BA;
            color: #fff;
        }
    }

    .chart {
        width: 100%;
        height: 100%;
        margin-top: 10px;
    }
}
</style>